@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root {
  --top-nav-height: 80px;
  --default-vertical-spacing: 0.75rem;
  --nav-height: 71.594px;
  --footer-height: 61px;
  --side-nav-width: 280px;
  --landing-page-max-width: 1200px;
  --scrollbar-background-color: #b7c0cd;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --serif: Tiempos, serif;
  --mono: GT America Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
    monospace;
  --source-code: 'Source Code Pro', Menlo, Monaco, monospace;

  --font-size-0: 8px;
  --font-size-1: 12px;
  --font-size-2: 13px;
  --font-size-3: 16px;
  --font-size-4: 18px;
  --font-size-5: 24px;
  --font-size-6: 32px;
  --font-size-7: 38px;
  --font-size-jumbo: 79px;

  --line-height-1: 16px;
  --line-height-2: 20px;
  --line-height-3: 25px;
  --line-height-4: 28px;
  --line-height-5: 32px;
  --line-height-6: 40px;
  --line-height-7: 48px;
  --line-height-jumbo: 90px;
  --color-success: #52c41a;
  --color-danger: #ff4d4f;
  --color-warning: #faad14;
  --color-text-primary: #262626;
  --color-text-secondary: #8c8c8c;
  --color-red-1: #fff1f0;
  --color-red-2: #ffccc7;
  --color-red-3: #ffa39e;
  --color-red-4: #ff7875;
  --color-red-5: #ff4d4f;
  --color-red-6: #f5222d;
  --color-red-7: #cf1322;
  --color-red-8: #a8071a;
  --color-red-9: #820014;
  --color-red-10: #5c0011;
  --color-volcano-1: #fff2e8;
  --color-volcano-2: #ffd8bf;
  --color-volcano-3: #ffbb96;
  --color-volcano-4: #ff9c6e;
  --color-volcano-5: #ff7a45;
  --color-volcano-6: #fa541c;
  --color-volcano-7: #d4380d;
  --color-volcano-8: #ad2102;
  --color-volcano-9: #871400;
  --color-volcano-10: #610b00;
  --color-orange-1: #fff7e6;
  --color-orange-2: #ffe7ba;
  --color-orange-3: #ffd591;
  --color-orange-4: #ffc069;
  --color-orange-5: #ffa940;
  --color-orange-6: #fa8c16;
  --color-orange-7: #d46b08;
  --color-orange-8: #ad4e00;
  --color-orange-9: #873800;
  --color-orange-10: #612500;
  --color-gold-1: #fffbe6;
  --color-gold-2: #fff1b8;
  --color-gold-3: #ffe58f;
  --color-gold-4: #ffd666;
  --color-gold-5: #ffc53d;
  --color-gold-6: #faad14;
  --color-gold-7: #d48806;
  --color-gold-8: #ad6800;
  --color-gold-9: #874d00;
  --color-gold-10: #613400;
  --color-yellow-1: #feffe6;
  --color-yellow-2: #ffffb8;
  --color-yellow-3: #fffb8f;
  --color-yellow-4: #fff566;
  --color-yellow-5: #ffec3d;
  --color-yellow-6: #fadb14;
  --color-yellow-7: #d4b106;
  --color-yellow-8: #ad8b00;
  --color-yellow-9: #876800;
  --color-yellow-10: #614700;
  --color-lime-1: #fcffe6;
  --color-lime-2: #f4ffb8;
  --color-lime-3: #eaff8f;
  --color-lime-4: #d3f261;
  --color-lime-5: #bae637;
  --color-lime-6: #a0d911;
  --color-lime-7: #7cb305;
  --color-lime-8: #5b8c00;
  --color-lime-9: #3f6600;
  --color-lime-10: #254000;
  --color-green-1: #f6ffed;
  --color-green-2: #d9f7be;
  --color-green-3: #b7eb8f;
  --color-green-4: #95de64;
  --color-green-5: #73d13d;
  --color-green-6: #52c41a;
  --color-green-7: #389e0d;
  --color-green-8: #237804;
  --color-green-9: #135200;
  --color-green-10: #092b00;
  --color-cyan-1: #e6fffb;
  --color-cyan-2: #b5f5ec;
  --color-cyan-3: #87e8de;
  --color-cyan-4: #5cdbd3;
  --color-cyan-5: #36cfc9;
  --color-cyan-6: #13c2c2;
  --color-cyan-7: #08979c;
  --color-cyan-8: #006d75;
  --color-cyan-9: #00474f;
  --color-cyan-10: #002329;
  --color-blue-1: #e6f7ff;
  --color-blue-2: #bae7ff;
  --color-blue-3: #91d5ff;
  --color-blue-4: #69c0ff;
  --color-blue-5: #40a9ff;
  --color-blue-6: #1890ff;
  --color-blue-7: #096dd9;
  --color-blue-8: #0050b3;
  --color-blue-9: #003a8c;
  --color-blue-10: #002766;
  --color-geekblue-1: #f0f5ff;
  --color-geekblue-2: #d6e4ff;
  --color-geekblue-3: #adc6ff;
  --color-geekblue-4: #85a5ff;
  --color-geekblue-5: #597ef7;
  --color-geekblue-6: #2f54eb;
  --color-geekblue-7: #1d39c4;
  --color-geekblue-8: #10239e;
  --color-geekblue-9: #061178;
  --color-geekblue-10: #030852;
  --color-purple-1: #f9f0ff;
  --color-purple-2: #efdbff;
  --color-purple-3: #d3adf7;
  --color-purple-4: #b37feb;
  --color-purple-5: #9254de;
  --color-purple-6: #722ed1;
  --color-purple-7: #531dab;
  --color-purple-8: #391085;
  --color-purple-9: #22075e;
  --color-purple-10: #120338;
  --color-magenta-1: #fff0f6;
  --color-magenta-2: #ffd6e7;
  --color-magenta-3: #ffadd2;
  --color-magenta-4: #ff85c0;
  --color-magenta-5: #f759ab;
  --color-magenta-6: #eb2f96;
  --color-magenta-7: #c41d7f;
  --color-magenta-8: #9e1068;
  --color-magenta-9: #780650;
  --color-magenta-10: #520339;
  --color-gray-1: #ffffff;
  --color-gray-2: #fafafa;
  --color-gray-3: #f5f5f5;
  --color-gray-4: #f0f0f0;
  --color-gray-5: #d9d9d9;
  --color-gray-6: #bfbfbf;
  --color-gray-7: #8c8c8c;
  --color-gray-8: #595959;
  --color-gray-9: #434343;
  --color-gray-10: #262626;
  --color-gray-11: #1f1f1f;
  --color-gray-12: #141414;
  --color-gray-13: #000000;
  --color-table-header: #ebeef1;
  --divider-color: #dae0e8;
  --card-border-color: #edf2f9;
  --color-black: #000000;
  --color-white: #ffffff;
  --text-button-hover-bg-color: rgba(0, 0, 0, 0.06);
  --text-button-active-bg-color: rgba(0, 0, 0, 0.15);
  --font-size-small: 12px;
  --font-size-base: 14px;
  --font-size-medium: 16px;
  --font-size-large: 18px;
}

:root,
.light {
  --white: #ffffff;
  --black: #18181b;
  --black-light: #58585f;
  --black-medium: #2c2c30;
  --gray-light: #f6f9fc;
  --gray-medium: #dce6e9;

  --yellow: #ffd848;
  --purple: #6e00f5;
  --green: #0a993e;
  --blue: #0073e6;
  --magenta: #dc34dc;

  --theme: var(--yellow);
  --stripe: #0a2540;

  --light: var(--white);
  --dark: var(--white);
  --text: var(--dark);

  --border-color: #dce6e9;
  --contrast-dark: var(--dark);
  --code-background: #38383f;
  --code-border: var(--gray-medium);
  --toc-border: rgba(0, 0, 0, 0.14);
  --translucent: rgba(0, 0, 0, 0.4);

  --docsearch-primary-color: var(--black-medium) !important;
  --docsearch-logo-color: var(--black-medium) !important;
}

.dark {
  --stripe: var(--white);

  --light: var(--black);
  --dark: var(--white);
  --text: var(--dark);

  --contrast-dark: var(--black-medium);
  --code-background: #38383f;
  --code-border: var(--black-light);
  --toc-border: var(--black-light);
  --translucent: rgba(255, 255, 255, 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#__next {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
}

p {
  line-height: 1.5em;
  margin: 0;
}
.section {
  line-height: 30px;
}
.section p {
  font-size: 15px;
  line-height: 30px;
  /* padding-top: 14px; */
}

article p a {
  color: rgb(84, 105, 212);
  text-decoration: none;
  font-weight: 500;
}

section h2 {
  margin-bottom: 32px;
}

section h3 {
  margin: 24px 0px 16px 0px;
  font-size: 18px;
}

section h4 {
  margin: 0px 0px 16px 0px;
  font-size: 18px;
}

article p a:hover {
  color: #4e11e2;
}

h1 {
  font-size: 40px;
}

h2 {
  margin: 1.5em 0;
}

a {
  color: rgba(75, 85, 99, 1);
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

body {
  color: var(--black);
  background: var(--light);
  font-family: var(--sans);
}

code {
  font-size: inherit;
  font-size: 15px;
  font-family: var(--mono);
  font-weight: 500;
  padding: 1px 2px;
  background: var(--code-background);
  /* border: 1px solid var(--code-border); */
  border-radius: 3px;
  white-space: nowrap;
  text-shadow: none !important;
}

pre[class*='language-'] {
  text-shadow: none !important;
  color: var(--text) !important;
  background: var(--code-background) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  font-family: var(--mono) !important;
  margin: 0 0 var(--default-vertical-spacing) !important;
}

pre[class*='language-'] .md-link {
  color: inherit !important;
}

.token {
  /* color: var(--text) !important; */
  background: transparent !important;
}

/* .token.comment {
  color: var(--translucent) !important;
} */

pre .token.string,
pre .token.boolean,
pre .token.number {
  color: var(--color-orange-4) !important;
}

pre .token.function,
pre .token.tagType,
pre .token.tag {
  color: var(--color-blue-5) !important;
}

pre .token.keyword,
.cm-attribute {
  color: var(--color-blue-4) !important;
}

pre .token.variable {
  color: var(--green) !important;
}

.equal-width {
  flex: 1 1 0px;
}

table {
  font-size: 14px;
  line-height: 30px;
  padding: 0px 12px;
  border: 1px solid #d8dee4;
  background-color: #f5f6f8;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 100%;
}

td:not(:last-child) {
  padding-right: 24px;
}

td:first-child {
  font-weight: 600;
}

img {
  width: 600px;
}

p:has(> img) {
  text-align: center;
}

section ul {
  padding-left: 32px;
  margin-top: 0px;
}

section ul > li {
  margin: 12px 0px;
  font-size: 15px;
  padding-left: 6px;
}

section ul > li::marker {
  color: var(--color-gray-6);
}
